// Aufgabe_12_2_Alle_meine_Entchen

var h = 0;
var noten;
var a4;
var c4;
var d4;
var e4;
var f4;
var g4;

function preload(){
  noten = loadImage("Entchen.JPG");
  a4 = loadSound("A4.mp3");
  c4 = loadSound("C4.mp3");
  d4 = loadSound("D4.mp3");
  e4 = loadSound("E4.mp3");
  f4 = loadSound("F4.mp3");
  g4 = loadSound("G4.mp3");
}

function setup() {
	createCanvas(600, 600);
  background(0);
  image(noten, 0, 150, 590, 200);
  a4.loop();
  c4.loop();
  d4.loop();
  e4.loop();
  f4.loop();
  g4.loop();
}

function draw() {
  colorMode(HSB, 360, 100, 100);

  // Text
  fill(h, 100, 100);
  textSize(50);
  text("Alle meine Entchen", 70, 90);

  // Die Klaviertasten werden gezeichnet
  stroke(0);
  strokeWeight(2);
  fill(0, 0, 70);
  rect(0, 400, 100, 200);
  rect(200, 400, 100, 200);
  rect(400, 400, 100, 200);

  fill(0, 0, 100);
  rect(100, 400, 100, 200);
  rect(300, 400, 100, 200);
  rect(500, 400, 100, 200);

  // Die Klaviertasten werden beschriftet
  stroke(0, 0, 0);
  fill(200, 100, 155);
  textSize(30);
  text("A 4", 20, 450);
  text("C 4", 120, 450);
  text("D 4", 220, 450);
  text("E 4", 320, 450);
  text("F 4", 420, 450);
  text("G 4", 520, 450);

  // Die Lautstärke der Töne wird auf Null gesetzt
  a4.setVolume(0);
  c4.setVolume(0);
  d4.setVolume(0);
  f4.setVolume(0);
  e4.setVolume(0);
  g4.setVolume(0);

  // Töne werden den Tasten zugeordnet
  if(mouseIsPressed && mouseX <= 100){
    a4.setVolume(1);
    h = 50;
   }
   else{
     a4.setVolume(0);
   }

  if (mouseIsPressed && mouseX >= 100 && mouseX <= 200){
    c4.setVolume(1);
    h = 100;
   }
   else{
     c4.setVolume(0);
   }
  if (mouseIsPressed && mouseX >= 200 && mouseX <= 300){
    d4.setVolume(1);
    h = 150;
   }
   else{
     d4.setVolume(0);
   }
  if (mouseIsPressed && mouseX >= 300 && mouseX <= 400){
    e4.setVolume(1);
    h = 200;
   }
   else{
     e4.setVolume(0);
   }
  if (mouseIsPressed && mouseX >= 400 && mouseX <= 500){
    f4.setVolume(1);
    h = 300;
   }
   else{
     f4.setVolume(0);
   }
  if (mouseIsPressed && mouseX >= 500 && mouseX <= 600){
    g4.setVolume(1);
    h = 350;
   }
   else{
     g4.setVolume(0);
   }
}
